<template>
    <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tree-select v-model:active-id="rightactiveId" v-model:main-active-index="leftactiveIndex"
        :items="categoryData">
        <template #content>
            <van-grid :column-num="3">
                <van-grid-item v-for="item in categoryData[leftactiveIndex]?.children" :key="item.id"
                    :icon="getImageUrl(item.categoryImage)" :text="item.text"
                    :to="({ name: 'mallproduct', query: { categoryId: item.id } })" />
                <!--:to="({ name: '', query: {categoryId:item.id} })"-->
            </van-grid>


        </template>


    </van-tree-select>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { listCategory } from '@/api/category/category.js'
const rightactiveId = ref(1);
const leftactiveIndex = ref(0);
const onClickLeft = () => history.back();
const items = [
    {
        text: '浙江',
        children: [
            { text: '杭州', id: 1 },
            { text: '温州', id: 2 },
            { text: '宁波', id: 3, disabled: true },
        ],
    },
]
const categoryData = ref([
    { id: 1, name: '手机数码', img: '', parentId: 0 },
    { id: 2, name: '小米手机', img: '', parentId: 1 },
    { id: 3, name: '华为手机', img: '', parentId: 1 },
    { id: 4, name: '笔记本', img: '', parentId: 0 },
    { id: 5, name: '小米笔记本', img: '', parentId: 4 },
    { id: 6, name: '华为笔记本', img: '', parentId: 4 },
])

onMounted(() => { 
    // categoryData.value.forEach(item => {
    //     item.text = item.name
    // }); 
    // const categoryData2=categoryData.value.reduce((newArry, currentValue) => { 
    //     currentValue.children = categoryData.value.filter(
    //         item => item.parentId === currentValue.id
    //     )
    //     if (currentValue.parentId===0) { 
    //         newArry.push(currentValue)
    //     }
    //     return newArry;
    // }, [])
    // console.log(categoryData2);
    // categoryData.value = categoryData2;
    //渲染数据
    callcategoryApi()
})

// 定义一个读取分类数据的函数
const callcategoryApi = () => { 
    listCategory().then(res => { 
        console.log(res);
        res.data.forEach(item => { 
            item.text = item.categoryName
            // if (item.parentId === 0) {
            //     categoryData.value.push(item)
            // } else { 
            //     const parent = categoryData.value.find(p => p.id === item.parentId)
            //     if (parent) { 
            //         parent.children.push(item)
            //     }
            // }
        })
        const categoryData2 = res.data.reduce((newArry, currentValue) => {
            // console.log(currentValue);
            
            currentValue.children = res.data.filter(
                item => item.parentCategoryId === currentValue.id
            )
            if (currentValue.parentCategoryId === 0) {
                newArry.push(currentValue)
            }
            return newArry;
        }, [])
        console.log(categoryData2);
        categoryData.value = categoryData2;
    })
}

//构建函数
const getImageUrl = (imgurl) => {
    console.log(imgurl);
    
    return imgurl.replace('/profile', 'http://www.hshp.com')
}
</script>

<style lang="scss" scoped>

</style>